<template>
    <div class="adminTaskInfo">
        <!-- <mu-paper class="paperz" :zDepth="2"> -->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 150px;" height="250">
                    <el-option v-for="item in searchs" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入内容" size="mini" v-model="searchList.searchValue"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="getTaskInfoList">搜索
                </el-button>
                <el-button style="background: #ffb73d;border-color: transparent; ;color: #fff;" size="mini"
                           @click="sxss">申诉系统
                </el-button>
            </el-form-item>
        </el-form>
        <el-table @filter-change="filter" :data="tableData" v-loading="loading"
                  @selection-change="handleSelectionChange"
                  style="width: 100%;margin-top:15px;">
            <el-table-column type="selection" width="">
            </el-table-column>
            <el-table-column type="index" label="序号" width="">
            </el-table-column>
            <el-table-column prop="id" label="编号" width="">
            </el-table-column>
            <el-table-column prop="shop" label="店铺" width="">
            </el-table-column>
            <!--<el-table-column prop="babyId" label="宝贝ID" width="120">-->
            <!--<template slot-scope="props">-->
            <!--<a target="_blank" :href="'https://detail.tmall.com/item.htm?id=' + props.row.babyId">{{props.row.babyId}}</a>-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column prop="taobao" label="多多号" width="">
            </el-table-column>
            <el-table-column prop="babyName" label="产品名称" width="">
                <template slot-scope="props">
                    <a target="_blank" :href="'https://detail.tmall.com/item.htm?id=' + props.row.babyId">{{props.row.babyName}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="insuranceMoney" label="是否购买保险" width="">
                <template slot-scope="props">
                    <p style="text-align: center;">{{props.row.insuranceMoney == 0 ? '否':'是'}}</p>
                </template>
            </el-table-column>
            <el-table-column prop="order" label="订单号" width="">
            </el-table-column>
            <el-table-column prop="userGroup" label="组" width="">
            </el-table-column>
            <el-table-column prop="principal" label="本金" width="">
                <template slot-scope="scope">
                    <span>{{scope.row.principal * 1}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sjComMoney" label="佣金" width=""></el-table-column>
            <el-table-column prop="principal" label="超高权重" width="">
                <template slot-scope="scope">
                    <span>{{scope.row.template.sf2 ? '是':'否'}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="sjComMoney" label="佣金" width="">
             </el-table-column>
             <el-table-column prop="" label="总金额" width="">
               &lt;!&ndash;<template slot-scope="scope">
                 {{scope.row.principal * 1 +scope.row.sjComMoney * 1}}
               </template>&ndash;&gt;
             </el-table-column>-->
            <!-- <el-table-column prop="" label="返款" width="">
               <template slot-scope="scope">
                 {{scope.row.sjComMoney - 3}}
               </template>
             </el-table-column>-->
            <!-- <el-table-column prop="" label="今日累计金额" width="">
               <template slot-scope="scope">
                 {{scope.row.principal * 1 +scope.row.moneyNum * 1+scope.row.sjComMoney * 1}}
               </template>
             </el-table-column>-->
            <el-table-column prop="repeat" label="重复率" width="">
                <template slot-scope="scope">
                    {{scope.row.repeat != '' ? (scope.row.repeat * 100).toFixed(2) +"%" :"0%"}}
                </template>
            </el-table-column>
            <!--<el-table-column prop="principal" label="余额" width="80">
            </el-table-column>
            <el-table-column prop="principal" label="佣金余额" width="80">
            </el-table-column>-->
            <!-- <el-table-column prop="addTime" label="开始时间" width="150">
                 <template slot-scope="props">
                     <span>{{ props.row.addTime | timeTo(1) }}</span>
                 </template>
             </el-table-column>-->
            <el-table-column prop="okTime" label="完成时间" width="">
                <template slot-scope="props">
                    <span>{{ props.row.okTime | timeTo(1) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="审核状态" width="">
                <template slot-scope="scope">
                    <div v-if="scope.row.status === '0'">
                        进行中
                    </div>
                    <div v-if="scope.row.status === '1'">
                        订单号待操作员审核
                    </div>
                    <div v-if="scope.row.status === '2'">
                        收货待审核
                    </div>
                    <div v-if="scope.row.status === '3'">
                        完成
                    </div>
                    <div v-if="scope.row.status === '4'">
                        冻结
                    </div>
                    <div v-if="scope.row.status === '999'">
                        取消
                    </div>
                    <div v-if="scope.row.status === '5'">
                        <span style="color: red">取消</span>
                    </div>
                    <div v-if="scope.row.status === '1001'|| scope.row.status === '1006' || scope.row.status === '1007'">
                        订单号审核通过
                    </div>
                    <div v-if="scope.row.status === '2001'">
                        订单号审核失败
                    </div>
                    <div v-if="scope.row.status === '2002'">
                        收货审核失败
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="交易状态" width="">

            </el-table-column>
            <el-table-column prop="buyer_rate" label="评价状态" width="">
            </el-table-column>

            <el-table-column prop="complaint" label="申诉" width="200px">
                <template slot-scope="scope">
                    <el-button type="warning" @click="complaint1(scope.row.id)" v-if="scope.row.complaint == 0"
                               size="mini">
                        投诉买家
                    </el-button>

                    <el-button type="primary" @click="complaint2(scope.row.id)" v-else="scope.row.complaint == 1"
                               size="mini">
                        投诉中
                    </el-button>
                    <!--<span v-if="$store.state.userInfo.admin == '微笑'">-->
                    <br/>

                    <span>
                  <!--<el-button type="primary" size="mini" :disabled="scope.row.insuranceMoney == 0" @click="tk(scope.row)"-->
                        <!--v-if="scope.row.tkStatus == -1">-->
                        <!--申请保险赔付-->
                        <!--</el-button>-->
                        <!--<el-button type="primary" size="mini" :disabled="scope.row.insuranceMoney == 0 || scope.row.principal > 150" @click="tk(scope.row)" v-if="scope.row.tkStatus == -1">-->
                        <!--申请保险赔付-->
                        <!--</el-button>-->
                        <!--<el-button type="warning" size="mini" @click="tk1" v-if="scope.row.tkStatus == 1">-->
                        <!--保险赔付待审核-->
                        <!--</el-button>-->
                        <!--<el-button type="primary" size="mini" @click="tk2" v-if="scope.row.tkStatus == 2">-->
                        <!--保险赔付未通过-->
                        <!--</el-button>-->
                        <!--<el-button type="success" size="mini" @click="tk3" v-if="scope.row.tkStatus == 3">-->
                        <!--保险赔付已经通过-->
                        <!--</el-button>-->
                       <br/>
                  <el-button type="danger" size="mini" :disabled="scope.row.principal >= 100" @click="tk(scope.row)"
                             v-if="scope.row.tkStatus == -1">
                    100以下包赔
                  </el-button>
                  </span>

                </template>
            </el-table-column>
            <!--<el-table-column prop="complaint" label="退款返款" width="80">-->
            <!--<template slot-scope="scope">-->
            <!--<el-button type="success" @click="tk(scope.row.id)"-->
            <!--size="mini">-->
            <!--申请-->
            <!--</el-button>-->
            <!--</template>-->
            <!--</el-table-column>-->

        </el-table>
        <br/>
        <div v-if="multipleSelection[0]">
            <el-button size="mini" type="primary" @click="setArr('delete','','删除')">删除
            </el-button>
        </div>
        <br/>
        <el-pagination :page-size="20" :current-page="searchList.pn" layout="prev, pager, next"
                       :total="searchList.total" @current-change="pnChange" v-if="searchList.total > 20">
        </el-pagination>

        <el-dialog title="" :visible.sync="goodUpdate" custom-class="backupdedleteUserDialog">
            <el-form label-width="110px">
                <el-form-item label="评价">
                    <el-input auto-complete="off" type="textarea" autosize v-model='list.text1'
                              :autosize="{ minRows: 3, maxRows: 12}"></el-input>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload ref="upload1" class="upload-demo" action="http://39.104.83.69:2727/v1/api/other/UploadImg" multiple name="1"
                               :data="list" :auto-upload="false" :limit="6" :on-success="uploadSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="追加评论">
                    <el-input auto-complete="off" type="textarea" v-model='list.text2' autosize
                              :autosize="{ minRows: 3, maxRows: 12}"></el-input>
                </el-form-item>

                <el-form-item label="追加图片" style="">
                    <el-upload ref="upload2" class="upload-demo" action="http://39.104.83.69:2727/v1/api/other/UploadImg" name="2" multiple
                               :data="list" :auto-upload="false" :limit="6" :on-success="uploadSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>

                    </el-upload>
                </el-form-item>

                <el-form-item label="追加天数" style="float: left;left: 25px">
                    <el-input auto-complete="off" v-model='list.num1' style="width: 65px;float: left"></el-input>
                </el-form-item>
                <el-form-item label="追加金额">
                    <el-input-number v-model="list.num2" :min="2" :max="6"></el-input-number>
                </el-form-item>

                <el-form-item style="text-align: center;">
                    <el-button type="primary" style="width: 200px;" @click="submitUpload">上传</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
        <!-- <div class="task_footer" v-if="this.default!=='yidaibei.com'&&this.default!=='www.yidaibei.com'">
             <a href="//www.7v2h.cn/index.html#/home" target="_black">真包网（防降权真实包裹）</a>
         </div>-->
        <!-- </mu-paper> -->
        <el-dialog
                title="上传买家申请退款时间的截图"
                :visible.sync="dialogVisible5"
                width="30%">

            <el-form>
                <span>输入退款日期:</span>
                <el-input v-model="dateValue" placeholder="请输入内容"></el-input>
                <div style="height: 10px;"></div>
                <span>添加备注</span>
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请添加备注"
                        v-model="textarea">
                </el-input>
                <div style="height: 10px;"></div>
                <el-form-item label="添加图片">
                    <el-upload
                            class="upload-demo"
                            action="http://39.104.83.69:2727/v1/api/other/UploadImg"
                            multiple
                            :limit="6"
                            :on-success="uploadSuccess1"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible5 = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog
                title="选择投诉原因"
                :visible.sync="dialogVisible"
                width="30%">
            <el-radio-group v-model="radio2">
                <el-radio :label="1" @change="show1 = false">买家没按规则去做</el-radio>
                <el-radio :label="2" @change="show1 = false">买家申请退款</el-radio>
                <el-radio :label="3" @change="show1 = true">其他</el-radio>
                <el-input v-if="show1" style="float: left;" v-model="input" placeholder="请输入内容"></el-input>
            </el-radio-group>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="queding()">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                textarea: '',
                loading: true,
                dateValue: '',
                dialogVisible5: false,
                show1: false,
                input: '',
                radio2: 1,
                dialogVisible: false,
                goodUpdate: false,
                default: "",
                taskInfoListTemp: {},
                tableData: [
                    {
                        // id:'1',
                        // taskId:'12',
                    }
                ],
                value: "",
                list: {
                    num2: 2,
                    num1: 0,
                    data: []
                },
                filterStatus: {
                    task: false,
                    goodcomment: false
                },
                value2: "2元",
                options2: [
                    {
                        value: 2,
                        label: "2元"
                    },
                    {
                        value: 3,
                        label: "3元"
                    },
                    {
                        value: 4,
                        label: "4元"
                    },
                    {
                        value: 5,
                        label: "5元"
                    }
                ],
                options: [
                    {
                        value: "1",
                        label: "订单待审核"
                    },
                    {
                        value: "2",
                        label: "收货待审核"
                    },
                    {
                        value: "3",
                        label: "完成"
                    },
                    {
                        value: "1001",
                        label: "订单手动审核通过"
                    },
                    {
                        value: "2001",
                        label: "订单审核失败"
                    },
                    {
                        value: "2002",
                        label: "收货审核失败"
                    }
                ],
                searchs: [
                    {
                        value: "user",
                        label: "用户名"
                    },
                    {
                        value: "taskId",
                        label: "任务ID"
                    },
                    {
                        value: "id",
                        label: "详情ID"
                    },
                    {
                        value: "shop",
                        label: "店铺"
                    },
                    {
                        value: "order",
                        label: "订单号"
                    }
                ],
                searchList: {
                    search: "user",
                    searchValue: "",
                    filter: {
                        status: "",
                        goodcomment: ""
                    },
                    pn: 1,
                    total: 0
                },
                multipleSelection: [],
                did: '',
                image: '',
                row_data: null
            };
        },
        computed: {
            tbHeight() {
                return document.body.clientHeight - 350
            }
        },
        methods: {
            getRowClass({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background:rgb(144,195,252);color:white;text-align:center;font-size:9px;font-weight:500;'
                } else {
                    return ''
                }
            },
            confirm() {
                if (this.row_data.info) {
                    this.$alert(this.row_data.info, '买家信息', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                } else {
                    if (this.dateValue == '') {
                        this.$message.error('退款时间不能为空！');
                    } else {
                        let _this = this;
                        _this.$http
                            .post("/api/api.php", {
                                id: "uptk",
                                taskId: _this.row_data.id,
                                img: _this.image,
                                remark: _this.textarea,
                                refund_time: _this.dateValue
                            })
                            .then(function (response) {
                                _this.$message({
                                    type: response.data.status,
                                    message: response.data.msg
                                });
                                _this.getTaskInfoList();
                            });
                    }

                }
            },
            uploadSuccess1(a) {
                this.image = a.data.url
                this.item3 = a.data.send_time
            },
            sxss() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getTaskInfoList",
                        search: JSON.stringify(_this.searchList),
                        complaint: '1'
                    })
                    .then(function (response) {
                        _this.tableData = response.data.data;
                        _this.searchList.total = parseInt(response.data.total);
                    });
            },
            complaint2(b) {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "complaint",
                        status: 0,
                        taskListId: b
                    })
                    .then(function (response) {
                        _this.getTaskInfoList();
                    });
            },
            queding() {
                if (this.radio2 != 3) {
                    let _this = this;
                    _this.$http
                        .post("/api/api.php", {
                            id: "complaint",
                            status: _this.radio2,
                            taskListId: _this.did,
                        })
                        .then(function (response) {
                            _this.dialogVisible = false
                            _this.getTaskInfoList();
                            _this.input = ''
                        });
                } else {
                    let _this = this;
                    _this.$http
                        .post("/api/api.php", {
                            id: "complaint",
                            status: _this.radio2,
                            taskListId: _this.did,
                            note: _this.input
                        })
                        .then(function (response) {
                            _this.input = ''
                            _this.dialogVisible = false
                            _this.getTaskInfoList();
                        });
                }


            },
            tk1() {
                this.$message({
                    message: '申请已经提交，正在审核！',
                    type: 'success'
                });
            },
            tk2() {
                this.$message({
                    message: '审核未通过，如有异议请联系客服人员！',
                    type: 'warning'
                });
            },
            tk3() {
                this.$message({
                    message: '保险赔付申请已经通过！',
                    type: 'success'
                });
            },
            tk(a) {
                this.row_data = a
                this.dialogVisible5 = true

            },
            complaint1(a) {
                this.did = a
                this.dialogVisible = true
            },
            complaint(a, b) {
                // let _this = this;
                // _this.$http
                //     .post("/api/api.php", {
                //         id: "complaint",
                //         status: a,
                //         taskListId: b
                //     })
                //     .then(function (response) {
                //         _this.getTaskInfoList();
                //     });
            },
            rand(a, b) {
            },
            pnChange(pn) {
                this.searchList.pn = pn;
                this.getTaskInfoList();
            },
            filter(value) {
                console.log(value);
                value.filterUser
                    ? (this.searchList.filter.user = value.filterTask[0])
                    : (this.searchList.filter.status = value.filterTask[0]);
                this.getTaskInfoList();
            },
            setArr(a, b, c) {
                let _this = this;
                _this
                    .$confirm("确认" + c + "?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this.$http
                            .post("/api/api.php", {
                                id: "setArr",
                                table: "taskList",
                                set: a,
                                field: b,
                                arr: JSON.stringify(_this.multipleSelection)
                            })
                            .then(function (response) {
                                _this.$message({
                                    type: response.data.status,
                                    message: response.data.msg
                                });
                                _this.getTaskInfoList();
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            },
            getTaskInfoList() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getTaskInfoList",
                        search: JSON.stringify(_this.searchList)
                    })
                    .then(function (response) {
                        _this.tableData = response.data.data;
                        _this.searchList.total = parseInt(response.data.total);
                        _this.loading = false
                    });
            },
            switchTaskInfoStatus(a, b) {
                let title;
                let _this = this;
                a === 2 ? (title = "确认任务 " + b + " 状态更新为审核通过?") : 1;
                _this
                    .$confirm(title, "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this.$http
                            .post("/api/api.php", {
                                id: "updateTaskInfoStatus",
                                user: b,
                                status: a
                            })
                            .then(function (response) {
                                _this.$message({
                                    type: response.data.status,
                                    message: response.data.msg
                                });
                                _this.getTaskInfoList();
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            },
            check(a, b) {
                let _this = this;
                _this.value = "";
                _this
                    .$confirm("确认操作", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this.$http
                            .post("/api/api.php", {
                                id: "updateTaskInfoCheck",
                                user: a,
                                status: b
                            })
                            .then(function (response) {
                                _this.$message({
                                    type: response.data.status,
                                    message: response.data.msg
                                });
                                _this.getTaskInfoList();
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            uploadSuccess() {
            },
            submitUpload() {
                this.$refs.upload1.submit();
                this.$refs.upload2.submit();
            }
        },
        mounted() {
            this.default = window.location.host;
            this.getTaskInfoList();
        }
    };
</script>
<style scoped>
    /deep/ .el-picker-panel {
        top: 580px !important;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 0;
    }

    .el-input__inner {
        margin-top: 20px;
    }

    .paperz {
        height: 90%;
        padding: 15px;
    }

    .demo-table-expand {
        font-size: 0;
        margin-left: 50px;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .el-form-item__content, .el-form-item__label {
        margin-top: -14px;
        margin-left: 10px;
    }

    .dedleteUserDialog {
        width: 980px;
    }

    .task_footer {
        position: fixed;
        left: 20px;
        bottom: 20px;
    }

    .task_footer a {
        text-decoration: underline;
    }
</style>
